<template>
  <h1> Vite + Vue3 + TS </h1>
  <h2>{{ obj }}</h2>
  <button @click="obj.name = '李四'"> 修改 name </button>
  <button @click="changeAge"> 修改 age </button>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

// ts 项目需要用 defineComponent 包起来
export default defineComponent({
  setup() {
    // * reactive()：用来定义响应式对象
    const obj = reactive({
      name: '张三',
      age: 18,
    });

    const changeAge = () => {
      obj.age++;
    };

    return { obj, changeAge };
  },
});
</script>
